<template>
	<ls-page title='邀请好友'>
		<view class="share-main">
			<view class="share-main-top">
				<image class="top-small" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_top1.png" mode=""></image>
				<image class="top-large" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_top2.png" mode=""></image>
			</view>
			<view class="share-main-center">
				<image class="center-yq" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_yq.png" mode=""></image>
				<view class="center-all">
					<view class="center-all-img" v-for="(v,k) in 3" :key="k">
						<view class="img-tp">
							
						</view>
						<view class="img-num">
							成功邀请1人
						</view>
						<view class="img-gift">
							科罗娜275ml*1
						</view>
					</view>
				</view>
				<view class="center-title">
					如何邀请好友
				</view>
				<view class="center-phone">
					<view class="center-phone-item">
						<image class="item-img" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_phone1.png" mode=""></image>
						<view class="item-tip">
							1.生成分享二维码
						</view>
					</view>
					<image class="icon-img" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_to.png" mode=""></image>
					<view class="center-phone-item">
						<image class="item-img" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_phone2.png" mode=""></image>
						<view class="item-tip">
							2.好友成功扫码
						</view>
					</view>
					<image class="icon-img" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_to.png" mode=""></image>
					<view class="center-phone-item">
						<image class="item-img" src="https://oss.jtmckj.com/wmp/qnjg/share/i_icon_phone3.png" mode=""></image>
						<view class="item-tip">
							3.获得奖励
						</view>
					</view>
				</view>
				<view class="center-btn">
					立即邀请
				</view>
			</view>
			<view class="share-main-footer">
				
			</view>
		</view>
	</ls-page>

</template>

<script setup>
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	import { HFiveMemberAppObjProcess } from '@/api/public.js'
	import wx from "weixin-js-sdk";

	
	
</script>

<style scoped lang="less">
	::v-deep{
		.up-navbar-view{
			display: none;
		}
	}
	.share-main{
		background-color: var(--mainbaccolor4);
		height: 100%;
		position: relative;
		padding-top: 15rpx;
		.top-small{
			width: 80rpx;
			height: 112rpx;
			position: absolute;
			right: 147rpx;
			top: 15rpx;
		}
		.top-large{
			width: 688rpx;
			height: 283rpx;
		}
		.share-main-center{
			position: absolute;
			top: 200rpx;
			width: 100%;
			height: 835rpx;
			background-image:url('https://oss.jtmckj.com/wmp/qnjg/share/i_icon_main.png') ;
			background-repeat: no-repeat;
			background-position: center;
			background-size: contain;
			.center-yq{
				width: 199rpx;
				height: 58rpx;
				margin-left: 42rpx;
				margin-top: 36rpx;
			}
			.center-all{
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
				padding: 0 58rpx;
				.center-all-img{
					text-align: center;
					.img-tp{
						width: 198rpx;
						height: 198rpx;
						border-radius: 8rpx;
					}
					.img-num{
						font-family: PingFang SC;
						font-weight: bold;
						font-size: 24rpx;
						color: var(--maincolorf1);
						line-height: 24rpx;
						padding: 16rpx 0;
					}
					.img-gift{
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: var(--maincolorf2);
						line-height: 24rpx;
					}
					
				}
			}
			.center-title{
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: var(--maincolorf1);
				line-height: 32rpx;
				margin-left: 59rpx;
				margin-top: 40rpx;
			}
			.center-phone{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 40rpx 70rpx;
				text-align: center;
				.center-phone-item{
					.item-img{
						width: 50rpx;
						height: 80rpx;
					}
					.item-tip{
						padding-top: 10rpx;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 20rpx;
						color: var(--maincolorf13);
						line-height: 20rpx;
					}
				}
				.icon-img{
					width: 34rpx;
					height: 18rpx;
				}
			}
			.center-btn{
				width: 320rpx;
				height: 80rpx;
				background: var(--mainbaccolor15);
				border-radius: 40rpx;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: var(--maincolor);
				line-height: 80rpx;
				text-align: center;
				margin: 20rpx auto 0;
			}
		}
	}
	
	
</style>